<style>
    #news_holder{
        background: url(<?=base_url()?>assets/img/backgrounds/h_repeat.png) repeat scroll 0 0 transparent;    
        width: 775px;
    }

    #news-content{
        width: 640px;
        background: #FFFFFF;
        min-height: 300px;
    }
    #main-news{
        background: #fcf7e3;
        width: 418px;
        min-height: 391px;
        position: relative;
    }
    #main-news .image{
        float: left;
    }
    #main-news .decor{
        float: right;
    }
    #main-news .title h2{
        font-size: 21px;
        font-weight: bold;
        padding: 16px 19px 5px;
        line-height: 24px;
    }
    #main-news .text {
        font-size: 11px;
        /*font-weight: bold;*/
        padding: 15px 19px;
        line-height: 16px;
    }
    #side-news{
        width:201px;
        margin: 0 0 0 12px;
    }
    #side-news .head-title {
        background: #ddb049;
        width: 100%;
        height: 31px;
    }
    #side-news .head-title .bullet{
/*        background: url("http://www.logicsolution.rs/adriadmc/assets/img/site/news/bullet.png") no-repeat scroll 12px 10px transparent;*/
        color: #FFF;
        font-size: 16px;
        font-weight: bold;
        padding: 6px 0 0 28px;
    }
    #side-news #one-news{
        background: #d2d2d2;
        widows: 100%;
        min-height: 162px;
        margin-top: 5px;
        padding: 10px 5px 0 0;
    }
    #side-news #one-news:hover{
        background: #e4e4e4;
        cursor: pointer; 
    }  
    #side-news #one-news .image{
        float: left;  
        margin-right: 5px;      
    }
    #side-news #one-news h2{
        padding-left: 5px;
        font-size: 12px;
        font-weight: bold;
        line-height: 17px;
    }
    #side-news #one-news .text{
        padding: 7px 13px;
        font-size: 11px;      
    }
    #side-news .spacer{
        background: #FF9900;      
        height: 1px;
        margin: 5px 0;
        width: 100%;
    }
    #side-news .link-news{  
        color: #333333;
    }
    .in-short-news{
        position: absolute; 
        color: #980001; 
        font-size: 33px; 
        font-weight: bold; 
        line-height: 33px;
        margin: 13px 201px;
        background: #FFFFFF;
        padding: 2px 6px;
        text-shadow: #c6c6c6 1px 1px 1px;
    }
    .clear{
        clear: both;
    }
</style>
<div id="heading">
    <div id="headinginner">
        <h1><span>On-site News</span></h1>
        <p class="clear"></p>
    </div>                          
</div>                              
<div id="stage-inner">
    <div class="box nopadding" style="margin-top: 15px; border: 1px solid #D2D0D0; background: #FFFFFF; width: 640px; ">
        <table cellspacing="0" cellpadding="0" class="folder-table">
            <tbody>
                <tr>
                    <td id="minireport" style="width: 100%; padding-bottom: 0;">
                        <div id="news-content">
                            <div id="main-news" class="left">
                                <div class="decor">
<!--                                    <img alt="Latest news" src="http://vijesti.logicsolution.rs/assets/img/site_news/latest-decor.gif">   -->
                                </div> 
                                <div class="image"> </div>
                                <div class="clear"></div> 
                                <div class="title"> <h2>  </h2> </div>
                                <div class="text"> <p> </p> </div> 
                            </div>
                            <div id="side-news" class="left">
                                <div class="head-title">
                                    <div class="bullet">News Archive:</div>
                                </div>
                                <div class="link-news" id="link-news-1" href="javascript:void(0)">
                                    <div id="one-news">
                                        <div class="image"> </div> 
                                        <div class="title"> <h2>  </h2> </div>
                                        <div class="text"> <p> </p> </div>
                                    </div>
                                </div>
                                <div class="spacer"></div>
                                <div class="link-news" id="link-news-2" href="javascript:void(0)">
                                    <div id="one-news">
                                        <div class="image"> </div> 
                                        <div class="title"> <h2>  </h2> </div>
                                        <div class="text"> <p> </p> </div>
                                    </div>
                                </div>
                            </div>
                            <p class="clear"></p> 
                        </div>
                    </td>
                </tr> 
            </tbody>
        </table>
    </div>  
</div>
<script type="text/javascript">
    $(document).ready(function(){

        /*  AGENCY NEWS SYSTEM ID 
        *   NEWS COUNTER
        *   NEWS DATA
        *   NEWS TOTAL
        */
        var LS_ac_id = 2;
        var cnt=0;
        var news
        var total;

        function citaj_podatke(){
            jQuery.ajax({
                type: 'GET',
                url: base_url+'onsite_news/citaj_podatke/'+LS_ac_id+'/?jsoncall=?',
                dataType: 'jsonp',
                success: function(data){
                    news = data;
                    total = news['jsonp'].length;
                    populate();
                },
                error:function(data){alert("Error: " + data);}
            });
            return false;
        }
        function prikazi_vest(id){
            id = parseInt(id);
            /*NEWS LIKE SLIDER LOGIC*/
            if(cnt+id>total){
                cnt=1;    
            }else if(cnt+id==total){
                cnt=0; 
            }else cnt+= id;
            //console.log("%s is curent id of %d total" , cnt, total);
            populate();
        }
        function populate(){
            jQuery('#main-news .title h2').html(news['jsonp'][cnt].title);
            jQuery('#main-news .text p').html(news['jsonp'][cnt].text);
            if(news['jsonp'][cnt].foto_path==""){
                jQuery('#main-news .image').html("")    
            }else{
                jQuery('#main-news .image').html('<img width="418" height="190" src="'+base_url+'assets/upload/fotografije/'+news['jsonp'][cnt].foto_path+'">');
            }

            /*NEWS LIKE SLIDER LOGIC*/
            fixed = cnt+1;
            if(fixed==total) fixed = 0;

            /*TEXT LOGIC - CUT*/
            var title;
            var text;
            title = news['jsonp'][fixed].title;
            text = news['jsonp'][fixed].text;

            if(title.length>58) title = title.substring(0, 57)+'...';    
            if(text.length>127) text = text.substring(0, 125)+'...';    

            jQuery('#link-news-1 #one-news .title h2').html(title); 
            jQuery('#link-news-1 #one-news .text p').html(text);
            if(news['jsonp'][fixed].foto_path==""){
                jQuery('#link-news-1 #one-news .image').html("")    
            }else{
                  var clean = news['jsonp'][fixed].foto_path.substring(0,news['jsonp'][fixed].foto_path.length-4);
                var thumb_foto_path = clean +"_90x65.jpg";
                jQuery('#link-news-1 #one-news .image').html('<img width="90" height="65" src="'+base_url+'assets/upload/fotografije/'+thumb_foto_path+'">');
            }

            /*NEWS LIKE SLIDER LOGIC*/
            fixed=fixed+1;
            if(fixed==total) fixed = 0;

            title = news['jsonp'][fixed].title;
            text = news['jsonp'][fixed].text;

            if(title.length>58) title = title.substring(0, 57)+'...';    
            if(text.length>127) text = text.substring(0, 125)+'...';    

            jQuery('#link-news-2 #one-news .title h2').html(title); 
            jQuery('#link-news-2 #one-news .text p').html(text);
            if(news['jsonp'][fixed].foto_path==""){
                jQuery('#link-news-2 #one-news .image').html("")    
            }else{
                var clean = news['jsonp'][fixed].foto_path.substring(0,news['jsonp'][fixed].foto_path.length-4);
                var thumb_foto_path = clean +"_90x65.jpg";
                jQuery('#link-news-2 #one-news .image').html('<img width="90" height="65" src="'+base_url+'assets/upload/fotografije/'+thumb_foto_path+'">');
            }
        }
        jQuery('.link-news').live('click',function(){
            var id = this.id.substring(10, this.id.length);
            prikazi_vest(id);

        })
        citaj_podatke();
    });
</script>